<template>
	<div style="margin-top: 1rem;">
		<div>
			<van-search placeholder="搜索游戏" @focus='onSearch()' />
		</div>
		<van-tabs v-model="activeKey" color="#01cbe2" @click="onClickLeftMenus(activeKey+1)">
			<van-tab :title="item.name" v-for="(item, i) in categoryList" :key="i" title-style="font-size:16px;">
				<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
					<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
						:immediate-check="false" :offset="0">
						<van-row v-for="(item,i) in productList" :key="i" @click="onDetail(item.id)"
							style="margin-top: 1rem;margin-left: 0.5rem;">
							<van-col style="display: flex;">
								<van-image radius="18px 18px 18px 18px"
									style="width: 7rem;height: 7rem; margin-left: 0.5rem;"
									:src="APIDomainName + item.pic">
								</van-image>
								<div style="margin-left: 1rem;">
									<div style="font-size: 22px;">
										{{item.title}}
									</div>
									<div style=" display: flex;margin-top: 0.7rem;color: #989898;">
										<div
											style="font-size: 12px;border-radius: 15px;background-color: #eaeaea;padding: 0.3rem 0.5rem;">
											{{item.labelone}}
										</div>
										<div
											style="font-size: 12px;border-radius: 15px;background-color: #eaeaea;padding: 0.3rem 0.5rem;margin-left: 0.5rem;">
											{{item.labeltwo}}
										</div>
									</div>
									<div style="display: flex;">
										<div style=" display: flex;position: relative;">
											<div style="font-size: 23px;color: #ff0000;margin-top: 1.1rem;">
												￥{{item.nowprice}}
											</div>
											<div
												style="font-size: 16px;color: #9a9a9a;margin-top: 1.6rem;margin-left: 0.2rem;text-decoration: line-through;">
												￥{{item.price}}
											</div>
										</div>
										<div style="width: 7rem;text-align: center; margin-top: 1.5rem;background-color: #ff5500;color: #ffffff;position: absolute;right: 1rem">
											{{item.discount}}
										</div>
									</div>
								</div>
							</van-col>
						</van-row>
					</van-list>
				</van-pull-refresh>
			</van-tab>
		</van-tabs>
	</div>


</template>



<script>
	//1.导入封装后的接口  
	import {
		getProductListAPI,
	} from "@/api/product.js";
	import {
		getCategoryAPI
	} from "@/api/category.js";

	export default {
		data() {
			return {
				productList: [], //商品类别（指定分类id）
				categoryList: [], //分类列表        
				//左侧 导航栏
				activeKey: 0,
				pageTotal: 0, //总页数
				//上拉加载控制变量
				loading: false,
				finished: false,
				//下拉刷新
				refreshing: false,
				//查询参数
				query: {
					category_id: null,
					pageIndex: 0, //当前页码
					pageSize: 8, //页码大小
					keyWord: "", //查询关键字
				},
			};
		},
		//生命周期的钩子函数，当实例别创建好了后被调用
		created() {
			//获取所有分类
			getCategoryAPI().then(result => {
				// console.log(result); //调式输出，也可以看看数据结构
				this.categoryList = result.data;
				this.query.category_id = this.categoryList[0].id; //取分类列表中的第一个分类id
				this.onRefresh();
			});
		},
		methods: {
			// 单击左菜单中的某一项后，显示对应分类的商品列表
			onClickLeftMenus(category_id) {
				this.query.category_id = category_id; //更新分类id        
				this.onRefresh();
			},

			onDetail(id) {
				this.$router.push({
					name: 'productDetail',
					params: {
						id
					},
				});
			},

			//上拉加载
			onLoad() {
				this.query.pageIndex += 1; //页码增加  
				getProductListAPI(this.query).then(result => {
					//如果时刷新就商品列表清空
					if (this.refreshing) {
						this.productList = [];
						this.refreshing = false;
					}

					//总页数
					this.pageTotal = result.pageTotal;
					//数组 拼接
					if (result.data.length > 0) {
						this.productList = this.productList.concat(result.data);
					}

					this.loading = false;

					if (this.query.pageIndex >= this.pageTotal) {
						this.finished = true;
					}

				});

			},

			//下拉刷新
			onRefresh() {
				// 清空列表数据
				this.finished = false;
				this.query.pageIndex = 0; //重置页号
				this.productList = [];

				// 重新加载数据
				// 将 loading 设置为 true，表示处于加载状态
				this.loading = true;
				this.onLoad();
			},

			//搜索商品
			onSearch() {
				this.$router.push({
					name: 'search',
				});
			}
		}

	};
</script>


<style lang="less" scoped="scoped">
	.goods_item {
		display: flex;
		flex-direction: column;
		margin: 10px;
		background-color: white;
		border-radius: 10px;
		font-size: 14px;
		text-align: center;

		.price {
			margin: 0.5rem auto;
		}
	}

	.van-pagination {
		width: 50%;
		margin: 0 auto;
	}

	.van-sidebar {
		width: 120px;

		.van-sidebar-item {
			padding: 10px;
		}
	}

	.van-card {
		font-size: 14px;

		.van-card__content {
			justify-content: center;

			.van-card__price {
				color: red;
				font-weight: bold;
				text-align: right;
			}
		}
	}

	.show {
		display: block;
	}

	.hidden {
		display: none;
	}

</style>
